<template>
    <div>
        <!-- 数字滚动 -->
        {{value.num.toFixed(0)}}
    </div>
</template>

<script setup>
import {reactive,watch} from 'vue'
import gsap from "gsap"

let props=defineProps({
    value:{
        type:Number,
        default:0
    }
})
let value = reactive({
    num:0
})

const roll=()=>{
    gsap.to(value,{
        duration:0.5,
        num:props.value
    })
}
roll()
// 防止还没有传过来就触发函数 我们使用监听函数
watch(()=>props.value,()=>{
    roll()
})

</script>